<template>
<div class="text-white content w-full" style="height:600px;display:inline-flex">
    <BorderBox1 class="bg-gray-800 py-1  h-full" style="width:50%">
      <div class="grid grid-rows-8 h-full gap-2" style="padding-top:60px;">
           <ServeMap></ServeMap>
      </div>
    </BorderBox1>
     <BorderBox1 class="bg-gray-800 py-1  h-full" style="width:50%">
      <div class="grid grid-rows-8 h-full gap-2" style="padding-top:60px;">
          <ServeMap2></ServeMap2> 
      </div>
    </BorderBox1>
  </div>
  <div class="text-white content w-full" style="height:660px">
    <BorderBox1 class="bg-gray-800 py-1 w-full h-full">
      <div class="grid grid-rows-5 h-full gap-2" style="padding-top:100px;padding:30px">
       
        <div class="bottom grid row-span-4 grid-cols-4 gap-2 h-full">
           <div class="left col-span-1  pb-4" style="padding-left:0">
            <JGSTop

            ></JGSTop>
          </div>
          <div class="middle col-span-1 pb-4">
            <UserTop
            
            ></UserTop>
          </div>
           <div class="middle col-span-1  pb-4">
            <BZTop
             
            ></BZTop>
          </div>
          <div class="left col-span-1 pb-4">
            <FWZTop ></FWZTop>
          </div>
         
        </div>
      </div>
    </BorderBox1>
  </div>
</template>

<script setup>
import { BorderBox1,BorderBox3} from '@kjgl77/datav-vue3'
import { ref } from 'vue'

import FWZTop from '@/view/dataAnalysis/model_S1/FangAnCount.vue'

import JGSTop from '@/view/dataAnalysis/model_S1/JGSCount.vue'
import UserTop from '@/view/dataAnalysis/model_S1/UserCount.vue'
import MainTitle from '@/view/allUser/components/mainTitle.vue'
import ServeMap from '@/view/dataAnalysis/model_S1/StationMapModelS1.vue'
import ServeMap2 from '@/view/dataAnalysis/model_S1/ServiceMapModelS1.vue'
import BZTop from '@/view/dataAnalysis/model_S1/stationBZTop.vue'
const data = ref({})
const LeftBarData = ref([])
const RightBarData = ref([])
const illList = ref([])
const line = ref({})
const isShowMap = ref(false)
const isShow = ref(false)
const isShowPie = ref(false)
const isShowHistogram = ref(false)
const isShowLine = ref(false)
const isShowBar = ref(false)
const isShowBZLine = ref(false)
const registrants_rank = ref([])
const hierarchy_pie = ref([])
const plan_histogram = ref({})
const plan_rank = ref([])
const service_histogram = ref({})
const BZlineData=ref({})

</script>

<style lang="scss" scoped>
.content {
  height: calc(100vh - 130px);
}
</style>
